<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" :circular="true">
			<!-- 	<swiper-item v-for="(item, i) in swiperList" :key="i">
				<view class="swiper-item">
					<image :src="item.image_src"></image>
				</view>
			</swiper-item> -->
			<swiper-item>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/首页轮播1.jpeg"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/首页轮播2.jpeg"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/首页轮播3.jpeg"></image>
			</swiper-item>
		</swiper>
		<view class="container">
			<template>
				<u-grid :col="3" :border="false">
					<navigator url="/pages/erWeiMa/erWeiMa">
						<u-grid-item :index="index" :key="index">
							<u-icon name="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/erweima1.png" :size="90"></u-icon>
							<view class="grid-text">社区出入码</view>
						</u-grid-item>
					</navigator>
					<u-grid-item :index="index+1" :key="index">
						<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/hot-fill-2.png" class="badge-icon"></image>
						<u-icon name="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/yijianfankui.png" :size="90"></u-icon>
						<view class="grid-text">信息反馈</view>
					</u-grid-item>
					<navigator url="/pages/registration/registration">
					<u-grid-item :index="index+2" :key="index"> 
						<u-icon name="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/churudengji.png" :size="90"></u-icon>
						<view class="grid-text">出入登记</view>
					</u-grid-item>
					</navigator>
					<u-grid-item :index="index+3" :key="index">
						<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/hot-fill-2.png" class="badge-icon"></image>
						<u-icon name="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/jurassic_audit-report.png" :size="90"></u-icon>
						<view class="grid-text">审核结果</view>
					</u-grid-item>
					<u-grid-item :index="index+4" :key="index">
						<u-icon name="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/jiankang.png" :size="90"></u-icon>
						<view class="grid-text">健康信息登记</view>
					</u-grid-item>
					<u-grid-item :index="index+5" :key="index">
						<u-icon name="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/lujingfenxi.png" :size="110"></u-icon>
						<view class="grid-text">疫情追踪</view>
					</u-grid-item>
				</u-grid>
			</template>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0
			};
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.container{
		margin-top: 80rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		align-items: center;
	}
	
</style>
